<template>
    <appFrame leftText="设置" :selected="4">
        <div class="setPage wh100">
            <div class="box flex-between-center">
                <i class="iconfont icongw-icon-shezhi-renyuan"></i>
                <span class="flex1 content">当前用户</span>
                <span>{{ currentUser }}</span>
            </div>
            <!-- <div class='box flex-between-center'>
                <i class='iconfont iconbaitiantaiyang-tianchong'></i>
                <span class="flex1 content">白天模式</span>
                <el-switch v-model="styleMode" active-color="#13ce66" inactive-color="#4b4c4d">
                </el-switch>
            </div> -->
            <!-- <div class="box flex-between-center">
                <i class='iconfont icon_liebiaoleixing_xitongyuyan'></i>
                <span class="flex1 content">系统语言</span>
                <span class='flex-center'>{{language=='zh'?'中文':'english'}} <i class="iconfont icon_liebiao_xiangqing"></i></span>
            </div> -->
            <!--
            <div class="box flex-between-center">
                <i class='iconfont icon_liebiaoleixing_qingkonghuancun'></i>
                <span class="flex1 content">清空缓存</span>
                <span><i class="iconfont icon_liebiao_xiangqing"></i></span>
            </div> -->
            <div class="box flex-between-center" @click="about">
                <i class="iconfont icongw-icon-shezhi-xinxi"></i>
                <span class="flex1 content">关于</span>
                <span><i class="iconfont icon_liebiao_xiangqing"></i></span>
            </div>
            <!-- <div class="box flex-between-center">
                <i class="iconfont icongw-icon-shezhi-pifu"></i>
                <span class="flex1 content">深夜模式</span>
                <el-switch v-model="theme" active-value="dark" inactive-value="light" @change="changeTheme"></el-switch>
            </div> -->

            <el-button class="logout" @click="logOut">退出登录</el-button>
        </div>
    </appFrame>
</template>

<script>
export default {
    data () {
        return {
            currentUser: '',
            styleMode: false, // 白天模式情况为true
            language: 'zh',
            theme: 'dark'
        };
    },
    mounted () {
        this.currentUser = window.sessionStorage.userName;
    },
    methods: {
        logOut () {
            this.$confirm('是否退出登录', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                iconClass: 'iconfont icongw-icon-tishi2',
                customClass: 'logout-msg'
            })
                .then(() => {
                    this.$api
                        .loginOut()
                        .then((rt) => {
                            if (rt.data.code == 200) {
                                let code = window.sessionStorage.getItem('isSingleSignOn');
                                window.sessionStorage.clear();
                                window.localStorage.clear();
                                this.$message.success(this.$t('home.tips.loggedOut'));
                                try {
                                    myJavaFun.OpenLocalUrl('login');
                                } catch (e) {
                                    this.$router.push('/login');
                                }
                            } else {
                                this.$message.error(this.$t('home.tips.logOutFail'));
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                })
                .catch(() => { });
        },
        about () {
            let versionInfo = sessionStorage.getItem('versionInfo');
            if (versionInfo) {
                this.$alert(versionInfo, '当前版本', {
                    confirmButtonText: '确定',
                    callback: (action) => { }
                });
            } else {
                this.$message.warning('暂无版本信息');
            }
        },
        changeTheme (value) { }
    }
};
</script>

<style lang="scss" scoped>
.setPage {
    .box {
        padding: 17px 20px;
        background-color: #232938;
        color: white;
        // border: 0.5px solid rgba(240, 244, 255, 0.16);
        border-radius: 4px;
        font-size: 14px;
        margin-bottom: 12px;

        .iconfont {
            color: #9094a0;
            font-size: 18px;
        }
        .content {
            font-weight: bold;
            margin-left: 10px;

            & + span {
                color: #777b86;
            }
        }
    }
    // .box:nth-child(2) {
    //     margin: 16px 0px;
    // }

    .logout {
        width: 100%;
        height: 54px;
        margin-top: 28px;
        background: #232938;
        border-radius: 6px;
        border: none;
        color: #3875ff;
    }
}
</style>
